share-fab-size= 42px
share-icon-size= share-fab-size - 8px

.post-share
  position: absolute
  right: 35px
  top: -21px
  z-index: 2
.post-share-fab
  display: block
  width: share-fab-size
  height: share-fab-size
  line-height: share-fab-size
  color: main-color !important
  background: lighten(#eaecf7, 10%)
  text-align: center
  border-radius: 50%
  font-size: 20px
  boxShadow(.3s)
.post-share-list
  position: absolute
  top: 3px
  right: 42px
  width: 300px
  visibility: hidden
  &.in
    visibility: visible
    .share-icons a
      opacity: 1
      transform(scale(1))
  .share-icons
    li
      display: inline-block
      margin-left: 10px
    .icon-square:before
      display: inline-block
      text-align: center
      color: rgba(0,0,0,0)
      border-radius: .2em
    a
      display: inline-block
      color: #fff
      text-align: center
      width: share-icon-size
      height: share-icon-size
      line-height: share-icon-size
      font-size: 1.3em
      border-radius: 50%
      boxShadow(.3s)
      opacity: 1
      transform(scale(0))
      -webkit-transform-origin: center bottom
      transform-origin: center bottom
      &.weibo
        background: #E6162D
      &.qq
        background: #3D95D5
      &.weixin
        background: #2BAD13
      &.facebook
        background: #4862A3
      &.twitter
        background: #55ACEE
      &.google
        background: #db4437
      &:hover
        &:after
          top: -32px
          right: -2px
          color: #fff
          background: main-color
          font-size: 14px
          content: attr(data-title)
          display: block
          padding: 2px 5px
          position: absolute
          white-space: nowrap
          border-radius: 2px
          box-shadow: 0 0 2px rgba(0,0,0,0.2)
          z-index: 10
          line-height: 21px
        &:before
          top: -7px
          right: 12px
          border: solid
          border-color: main-color transparent
          border-width: 5px 5px 0 5px
          content: ""
          display: block
          position: absolute
          z-index: 20

.wx-share
    p
      margin: 0 0 15px
      font-size: font-size
    img
      width: 200px
.mask
  visibility: hidden
  position: fixed
  top: 0
  left: 0
  bottom: 0
  z-index: 99
  width: 100%
  height: 100%
  background: #000
  opacity: 0
  pointer-events: none
  -webkit-transition: .3s ease-in-out
  transition: .3s ease-in-out
  &.in
    visibility: visible
    pointer-events: auto
    opacity: .3
